import { QuestionCircleFilled } from "@ant-design/icons"
import { Table, TableColumnsType, Tooltip } from "antd"
import React from "react"
import { useSelector } from "react-redux"

import { SFlex } from "@/components/common"
import { useLocale } from "@/locales"
import { AppState } from "@/stores"
import { handleTotalNumber } from "@/utils/util"

interface Props {
	loading: boolean
	proxyAccountInfo: any
	handleAmountDialog: (record: any) => void
}

const Table2: React.FC<Props> = ({ loading, proxyAccountInfo, handleAmountDialog }) => {
	const { newFormat } = useLocale()
	const { currency } = useSelector((state: AppState) => state.config)

	const columns3: TableColumnsType = [
		{
			title: newFormat("funds.columns.project"),
			dataIndex: "venueName",
			key: "venueName",
			align: "center",
			render: () => "德州增值服务"
		},
		{
			title: newFormat("funds.columns.valueAddedServiceConsumption"),
			dataIndex: "clubAmount",
			key: "clubAmount",
			align: "center",
			width: 200,
			render: (text, record) => (
				// <a className="lightBlueColor" onClick={() => clubAmountDialogFn(record)}>
				<a onClick={() => handleAmountDialog(record)}>{handleTotalNumber(currency.symbol, "USDT", record.clubAmount)}</a>
			)
		},
		{
			title: newFormat("funds.columns.teamShareRatio"),
			dataIndex: "rebateRate",
			key: "rebateRate",
			align: "center",
			render: text => `${text}%`
		},
		{
			title: newFormat("funds.columns.teamShareAmount"),
			dataIndex: "rebateAmount",
			key: "rebateAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.rebateAmount)
		},
		{
			title: newFormat("funds.columns.directProxyTeamShareAmount"),
			dataIndex: "underProxyAmount",
			key: "underProxyAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.underProxyAmount)
		},
		{
			title: (
				<span>
					{newFormat("funds.columns.actualShareAmount")}
					<Tooltip title={newFormat("funds.fund_audit.tip_2")}>
						<QuestionCircleFilled />
					</Tooltip>
				</span>
			),
			dataIndex: "incomeAmount",
			key: "incomeAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.incomeAmount)
		}
	]

	return (
		<SFlex vertical>
			<Table
				size="small"
				className="small-size-table"
				dataSource={proxyAccountInfo}
				columns={columns3}
				pagination={false}
				rowKey="userName"
				style={{ width: "100%", margin: "15px 0" }}
				loading={loading}
			/>
		</SFlex>
	)
}

export default Table2
